import styled from 'styled-components'

export const VideoListWrapper=styled.div`
    margin: .08rem .08rem;
    &:after{
        content: '';
        display: block;
        clear: both;
    }
    z-index: 5;
`
export const VideoItem=styled.li`
    height: 2.7rem;
    float: left;
    &:nth-child(2n){
        float: right;
    }
    width: 1.7rem;
    background-color: white;
    margin: .04rem .04rem;
    position: relative;
    border-radius: .1rem;
    
    .video-img{
        display: float;
        position: absolute;
        z-index:5;
        width:100%;
	    height:100%;
        border-radius: .1rem;
        background-image: url('http://p6-webcast-sign.douyinpic.com/webcast-cover/7109850946729528094~tplv-qz53dukwul-common-resize:0:0.image?x-expires=1658537904&x-signature=Mj8Ir6l5ma8VmIy%2Funa86YjGr2E%3D');
        /*水平垂直居中*/
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    .video-visitorsnum{
        display: float;
        position: absolute;
        z-index:10;
        left: .08rem;
        top: .08rem;
        div{
            background-color: rgba(0,0,0,0.5);
            display: flex;
            border-radius: .04rem;
            li{
                padding: 0 .04rem;
                color: white;
                &:nth-child(1){
                    border-radius: .04rem;
                    background-color: red;
                    
                }
            }
        }
    }
    .video-goodsnum{
        display: float;
        position: absolute;
        z-index:10;
        width: 100%;
        height: .5rem;
        left: .04rem;
        bottom: 1rem;
        div{

            width: .5rem;
            height: .5rem;
            border-radius: .04rem;
            border: .01rem solid #F5F5F5  ;
            background-image: url('https://p9-aio.ecombdimg.com/obj/ecom-shop-material/v1_ltpbPiza_71104276384308103720978_9bc2f64a2dd5851a4410fc0eb51d753e_sx_138457_www800-800');
            /*水平垂直居中*/
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
        }
        span{
            position:absolute;
            color: white;
            left: .5rem;
            bottom: 0;
            background-color: rgba(0,0,0,0.1)
        }
        
    }
    .video-title{
        display: float;
        position: absolute;
        z-index:10;
        color: white;
        font-size: .16rem;
        left: .04rem;
        bottom: .4rem;
        background-color: rgba(0,0,0,0.1)
    }
    .video-host{
        display: float;
        position: absolute;
        z-index:10;
        left: .1rem;
        bottom: .04rem;
        span{
            text-align: center;
            color: white;
            font-size: .16rem;
            /* background-color: rgba(0,0,0,0.1); */
            margin:0 .1rem;
        }
    }
`